<template>
  <div class="wrapper">
    <el-form ref="registerForm" :rules="rules" :model="registerForm" class="registerContainer" label-width="80px">
      <h3 class="loginTitle">个 人 注 册</h3>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" auto-complete="false" v-model="registerForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="昵 称" prop="nick">
        <el-input type="text" auto-complete="false" v-model="registerForm.nick" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="学 号" prop="stuNumber">
        <el-input type="text" auto-complete="false" v-model="registerForm.stuNumber" placeholder="请输入在校学号"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
      <el-input type="text" auto-complete="false" v-model="registerForm.phone" placeholder="请输入个人手机号"></el-input>
    </el-form-item>
      <el-form-item label="密 码" prop="password">
        <el-input type="password" auto-complete="false" v-model="registerForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input type="password" auto-complete="false" v-model="registerForm.password2" placeholder="再次输入密码"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-row>
          <el-col :span="14">
            <el-input type="text" auto-complete="false"
                      v-model="registerForm.code"
                      placeholder="请输入验证码"
                      style="width: 155px;"></el-input>
          </el-col>
          <el-col :span="10">
            <img :src="'api/'+captchaUrl" @click="updateCaptcha"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-button type="success" style="width:100%" @click="submitRegister">注册</el-button>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                registerForm:{
                    username: '',
                    nick: '',
                    stuNumber: '',
                    phone: '',
                    password: '',
                    password2: '',
                    code: ''
                },
                captchaUrl: '/captcha?time='+new Date(),
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    nick: [{required: true, message: '请输入昵称', trigger: 'blur'}],
                    stuNumber: [{required: true, message: '请输入学号', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
                    password2: [{required: true, message: '再次确认密码', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                }
            }
        },
        methods:{
            submitRegister(){
                this.$refs.registerForm.validate(valid=>{
                    if(valid){
                        if(this.registerForm.password !== this.registerForm.password2){
                            this.$message.error("两次输入密码不一致！");
                            this.updateCaptcha();
                            return false;
                        }
                        this.postRequest('/register', this.registerForm).then(resp=>{
                            if(resp){
                                if(resp.success){
                                    const token=resp.token;
                                    sessionStorage.setItem("token",token);
                                    const userInfo=JSON.stringify(resp.entity);
                                    sessionStorage.setItem("currentUser",userInfo);
                                    this.$router.replace("/home");
                                }
                                this.$message.error(resp.message);
                                this.updateCaptcha();
                                return false;
                            }
                            this.$message.error("未知错误！");
                            this.updateCaptcha();
                            return false;
                        })
                    }else{
                        this.$message.error("请输入所有字段！");
                        this.updateCaptcha();
                        return false;
                    }
                })
            },
            updateCaptcha(){
                this.captchaUrl='/captcha?time='+new Date();
            }
        }
    }
</script>

<style scoped>
  .registerContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle{
    margin: 0 auto 40px auto;
    text-align: center;
  }
  .loginRemember{
    text-align: left;
    margin: 0 0 15px 17px;
  }
  .el-form-item__content{
    display: flex;
    align-items: center;
  }
  .wrapper{
    width: 100%;
    height: 100%;
  }
  .login_register{
    text-align: center;
  }
</style>
